<template>
  <div
    class="read-more"
    @click="toggle"
    v-if="status === 'more' || (showLess && status === 'less')"
  >
    <slot name="more" v-if="status === 'more'">{{ moreText }}</slot>
    <slot name="less" v-if="status === 'less' && showLess">{{ lessText }}</slot>
  </div>
</template>

<script setup name="ReadMore">
import { ref } from 'vue'

defineProps({
  moreText: {
    type: String,
    default: '显示全部',
  },
  lessText: {
    type: String,
    default: '折叠',
  },
  showLess: {
    // 是否显示折叠按钮，默认不显示，展开后无折叠按钮
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['toggle'])

const status = ref('more') // more：可显示更多、less：可显示折叠

function toggle() {
  status.value = status.value === 'more' ? 'less' : 'more'
  emit('toggle', status.value)
}
</script>

<style lang="stylus" scoped>
.read-more
  width: 100%;
  height: 45px;
  line-height: 45px;
  font-size: 17px;
  text-align: center;
  color: #2970f6;
  background: white;
  cursor pointer
</style>
